<!DOCTYPE html>
<html>
  <head>
    <title>sidebar-v2 example</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <link
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      crossorigin=""
    />

    <link rel="stylesheet" href="../css/leaflet-sidebar.css" />

    <style>
      body {
        padding: 0;
        margin: 0;
      }

      html,
      body,
      #map {
        height: 100%;
        font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
      }

      .lorem {
        font-style: italic;
        color: #aaa;
      }
    </style>
  </head>
  <body>
    <div id="sidebar" class="leaflet-sidebar collapsed">
      <!-- Nav tabs -->
      <div class="leaflet-sidebar-tabs">
        <ul role="tablist">
          <li>
            <a href="#home" role="tab"><i class="fa fa-bars"></i></a>
          </li>
          <li>
            <a href="#profile" role="tab"><i class="fa fa-user"></i></a>
          </li>
          <li class="disabled">
            <a href="#messages" role="tab"><i class="fa fa-envelope"></i></a>
          </li>
        </ul>

        <ul role="tablist">
          <li>
            <a href="#settings" role="tab"><i class="fa fa-gear"></i></a>
          </li>
        </ul>
      </div>

      <!-- Tab panes -->
      <div class="leaflet-sidebar-content">
        <div class="leaflet-sidebar-pane" id="home">
          <h1 class="leaflet-sidebar-header">
            sidebar-v2
            <span class="leaflet-sidebar-close"
              ><i class="fa fa-caret-right"></i
            ></span>
          </h1>

          <p>
            A responsive sidebar for mapping libraries like
            <a href="https://leafletjs.com/">Leaflet</a>.
          </p>

          <p class="lorem">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>

          <p class="lorem">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>

          <p class="lorem">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>

          <p class="lorem">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <div class="leaflet-sidebar-pane" id="profile">
          <h1 class="leaflet-sidebar-header">
            Profile<span class="leaflet-sidebar-close"
              ><i class="fa fa-caret-right"></i
            ></span>
          </h1>
        </div>

        <div class="leaflet-sidebar-pane" id="messages">
          <h1 class="leaflet-sidebar-header">
            Messages<span class="leaflet-sidebar-close"
              ><i class="fa fa-caret-right"></i
            ></span>
          </h1>
        </div>

        <div class="leaflet-sidebar-pane" id="settings">
          <h1 class="leaflet-sidebar-header">
            Settings<span class="leaflet-sidebar-close"
              ><i class="fa fa-caret-right"></i
            ></span>
          </h1>
        </div>
      </div>
    </div>

    <div id="map"></div>

    <a href="https://github.com/nickpeihl/leaflet-sidebar-v2/"
      ><img
        style="position: fixed; top: 0; left: 0; border: 0; z-index: 1000;"
        src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"
        alt="Fork me on GitHub"
    /></a>

    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      crossorigin=""
    ></script>
    <script src="../js/leaflet-sidebar.js"></script>

    <script>
      var map = L.map("map", {
        zoomControl: false
      });
      map.setView([51.2, 7], 9);

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 18,
        attribution: "Map data &copy; OpenStreetMap contributors"
      }).addTo(map);

      L.control
        .zoom({
          position: "topright"
        })
        .addTo(map);

      var marker = L.marker([51.2, 7]).addTo(map);

      var sidebar = L.control
        .sidebar({ container: "sidebar", position: "right" })
        .addTo(map)
        .open("home");
    </script>
  </body>
</html>
